<template>
	<view class="container">
		<view class="info">
			<image :src="teamData.coverImage" mode="widthFix" />
			<view class="title">
				<text>{{ teamData.goodsName }}</text>
				<view class="circle">
					<view class="trangle"></view>
				</view>
			</view>
			<view class="des">
				<text>时间：{{ teamData.projectDate }}</text>
				<text>地点：{{ teamData.addressInfo }}</text>
			</view>
		</view>
		<view class="team">
			<view class="teacher">
				<view class="title">
					<text>- 带队老师 -</text>
				</view>
				<view class="content">
					<image
						:src="teamData.teacherImg || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/teacher.png'"
						mode="widthFix"
					/>
					<view class="des">
						<text>{{ teamData.teacherName || '' }}</text>
					</view>
				</view>
			</view>
			<view class="students">
				<view class="title">
					<text>- 已报名学生 -</text>
				</view>
				<view class="content">
					<view class="studeng" v-for="(t, index) in teamData.groupList" :key="index" @click="toTeam(t)">
						<image
							:src="t.headPic || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/student1.png'"
							mode="widthFix"
						/>
						<view class="name">
							<text>{{ t.nickName }}</text>
						</view>
					</view>
					<view v-if="teamData.groupList.length == 0" style="text-align: center; width: 625rpx">暂无数据</view>
				</view>
			</view>
			<view class="view_des"> 点击头像查看个人风采 </view>
			<view class="btn_bottom" @click="toTeam"> 团队风采 > </view>
		</view>
	</view>
</template>

<script>
import yanxueApi from '@/api/yanxue/yanxue'
// import indexApi from "@/api/yanxue/yanxue";
export default {
	data() {
		return {
			teamData: {
				groupList: []
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.getDeatilFunc(options.id)
		}
	},
	methods: {
		toTeam(item = {}) {
			let obj = {
				id: this.teamData.id,
				userId: item.id || '0',
				edit: this.teamData.userType,
				ownType: String(item.ownType) || ''
			}
			this.$navTo('pagesA/teamStyle/index', obj)
		},
		getDeatilFunc(id) {
			yanxueApi.getProjectingInfo({ id }).then(res => {
				this.teamData = res.result
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 24rpx;
	background: linear-gradient(180deg, #ffffff 0%, #c1f26c 100%);
}
.info {
	width: 702rpx;
	// height: 416rpx;
	padding-bottom: 40rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 20rpx 20rpx;
	box-shadow: 0rpx 10rpx 26rpx -4rpx rgba(76, 79, 148, 0.2);
	image {
		width: 690rpx;
		// height: 232rpx !important;
	}
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		margin-top: 32rpx;
		padding-left: 32rpx;
		padding-right: 20rpx;
		.circle {
			position: relative;
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			background-color: #f95513;
			.trangle {
				position: absolute;
				top: 10rpx;
				left: 12rpx;
				width: 24rpx;
				height: 24rpx;
				background-color: #fff;
				clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
				transform: rotate(90deg);
			}
		}
	}
	.des {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		font-size: 24rpx;
		color: #666;
		padding-left: 40rpx;
		padding-right: 20rpx;
		margin-top: 28rpx;
	}
}
.team {
	margin-top: 24rpx;
	width: 702rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding-bottom: 80rpx;
	.teacher {
		.title {
			text-align: center;
			font-family: HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			padding-top: 34rpx;
		}
		.content {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-top: 32rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
			.des {
				text-align: center;
				font-size: 24rpx;
				color: #666;
				margin-top: 16rpx;
			}
		}
	}
	.students {
		.title {
			text-align: center;
			font-family: HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			padding-top: 32rpx;
		}
		.content {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			padding: 0 39rpx;
			flex-wrap: wrap;
			margin-top: 32rpx;
			.studeng {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.name {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}
	}
	.view_des {
		text-align: center;
		font-size: 24rpx;
		color: #666;
		margin-top: 80rpx;
	}
	.btn_bottom {
		width: 654rpx;
		height: 94rpx;
		background: linear-gradient(-10deg, #facc22 0%, #f95513 100%);
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(52, 52, 52, 0.21);
		border-radius: 46rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		line-height: 94rpx;
		margin: 34rpx auto 0 auto;
	}
}
</style>
